import React, { Component } from "react";
import { Text, View, Image } from "react-native";
import Toast from "react-native-simple-toast";
import { colors } from "../Style/Colors";

export class Errors extends Component {
  state = {
    hasError: false
  };

  componentDidCatch(error, info) {
    this.setState({ hasError: true });
    Toast.show("Error : " + error);
    Toast.show("Info : " + info);
  }

  render() {
    if (this.state.hasError) {
      return (
        <View style={styles.container}>
          <Image
            style={styles.img}
            source={require("../assets/no_inter.png")}
          />
          <Text style={styles.errorText}>Something went wrong ;(</Text>
        </View>
      );
    }
    return this.props.children;
  }
}

const styles = {
  container: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
    backgroundColor: colors.whiteColor
  },
  buttonWrapper: {
    backgroundColor: colors.primaryColor,
    padding: 10,
    paddingHorizontal: 20,
    justifyContent: "center",
    alignItems: "center",
    marginTop: 20
  },
  text: {
    color: colors.whiteColor
  },
  img: {
    width: "100%",
    height: 300,
    resizeMode: "contain"
  },
  errorText: {
    color: "tomato",
    fontSize: 18
  }
};

export default Errors;
